<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<div class="card">
    <div class="card-header">
        <span class="font-weight-bold">
            <span class="fa fa-lightbulb-o fa-lg mr-2 text-danger"></span>
            <span class="text-secondary" i18n>Add Device Wizard</span>
        </span>
    </div>
    <div class="card-header py-2">
        <nav aria-label="breadcrumb" class="mb-0 p-0">
            <ol class="breadcrumb p-1 mb-0 bg-light">
                <li class="breadcrumb-item">
                    <span [ngClass]="currentStep >= 0? selectedClass:noSelectedClass">
                        <span i18n>SelectDeviceService</span>
                        <i *ngIf="currentStep >= 1" class="fa fa-check ml-1"></i>
                    </span>
                </li>
                <li class="breadcrumb-item">
                    <span [ngClass]="currentStep >= 1? selectedClass:noSelectedClass">
                        <span i18n>SelectDeviceProfile</span>
                        <i *ngIf="currentStep >= 2" class="fa fa-check ml-1"></i>
                    </span>
                </li>
                <li class="breadcrumb-item">
                    <span [ngClass]="currentStep >= 2? selectedClass:noSelectedClass">
                        <span i18n>DevicePrimary</span>
                        <i *ngIf="currentStep >= 3" class="fa fa-check ml-1"></i>
                    </span>
                </li>
                <li class="breadcrumb-item">
                    <span [ngClass]="currentStep >= 3? selectedClass:noSelectedClass">
                        <span i18n>CreateAutoEvent</span>
                        <i *ngIf="currentStep >= 4" class="fa fa-check ml-1"></i>
                    </span>
                </li>
                <li class="breadcrumb-item active">
                    <span [ngClass]="currentStep >= 4? selectedClass:noSelectedClass">
                        <span i18n>CreateDeviceProtocol</span>
                        <i *ngIf="currentStep >= 5" class="fa fa-check ml-1"></i>
                    </span>
                </li>
            </ol>
        </nav>
    </div>
    <div class="card-header py-1">
        <button *ngIf="currentStep" class="btn btn-info btn-sm"  (click)="previous()">
            <i class="fa fa-long-arrow-left mr-1"></i>
            <span i18n>Previous</span>
        </button>
        <button *ngIf="4 > currentStep; else stepDone" class="btn btn-primary btn-sm float-right" (click)="next()" [disabled]="stepStateLock()">
            <span i18n>Next</span>
            <i class="fa fa-long-arrow-right ml-1"></i>
        </button>
        <ng-template #stepDone>
            <button class="btn btn-success btn-sm ml-4 float-right" [disabled]="stepStateLock()" (click)="submit()">
                <i class="fa fa-save mr-1"></i> 
                <span i18n>Submit</span> 
            </button>
        </ng-template>
    </div>
    <div class="card-body p-0">
        <div [ngSwitch]="currentStep">
            <ng-template [ngSwitchCase]="0" #SelectDeviceService>
                <div class="p-2">
                    <app-device-service-list
                    (singleDeviceSvcSelectedEvent)="onSingleDeviceSvcSelected($event)"
                    [deviceSvcSelected]="selectedSvc"
                    ></app-device-service-list>
                </div>
            </ng-template>

            <ng-template [ngSwitchCase]="1" #SelectDeviceProfile>
                <div class="p-2">
                    <app-device-profile-list
                    (singleProfileSelectedEvent)="onSingleProfileSelected($event)"
                    [singleProfileSelected]="selectedProfile"
                    [enableSelectAll]="false"
                    [toolbars]="false"
                    [associatedDeviceColumn]="false"></app-device-profile-list>
                </div>
            </ng-template>

            <ng-template [ngSwitchCase]="2" #DevicePrimary>
                <form class="px-5 py-4">
                    <div class="form-group row has-validation">
                      <label for="deviceName" class="col-md-2 col-form-label" required i18n>Name</label>
                      <div class="col-md-10">
                        <input type="text" class="form-control" id="validationDeviceNameFeedback" [class.is-invalid]="!newDevice.name" [class.is-valid]="newDevice.name" name="deviceName" [(ngModel)]="newDevice.name">
                        <div id="validationDeviceNameFeedback" class="invalid-feedback">
                            <small i18n>the device name can't be empty!</small>
                        </div>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="deviceDesc" class="col-md-2 col-form-label" i18n>Description</label>
                      <div class="col-md-10">
                        <input type="text" class="form-control" name="deviceDescription" [(ngModel)]="newDevice.description">
                      </div>
                    </div>
                    <div class="form-group row">
                        <label for="deviceLabels" class="col-md-2 col-form-label" i18n>Labels</label>
                        <div class="col-md-10">
                          <input type="text" class="form-control" name="deviceLabels" [(ngModel)]="deviceLabels" placeholder="Multiple Labels are separated by commas: label1,label2,label3">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="adminState" class="col-md-2 col-form-label" i18n>AdminState</label>
                        <div class="col-md-10">
                            <select class="custom-select"  name="deviceAdminState" [(ngModel)]="newDevice.adminState">
                                <option value="UNLOCKED">UNLOCKED</option>
                                <option value="LOCKED">LOCKED</option>
                            </select>
                        </div>
                    </div>
                </form>
            </ng-template>

            <ng-template  [ngSwitchCase]="3" #CreateAutoEvent>
                <div class="card border-0">
                    <div class="card-header">
                        <span class="fa fa-info-circle text-warning font-weight-bold" i18n> this step is optional, you can skip it then set it later in edit mode.</span>
                    </div>
                    <div class="card-body">
                        <app-device-auto-event 
                        [deviceProfile]="selectedProfile"
                        [(autoEvents)]="newDevice.autoEvents"
                        [(isValid)]="isAutoEventsValid"
                        ></app-device-auto-event>
                    </div>
                </div>
            </ng-template>
            
            <div [style.display]="currentStep === 4 ? '' : 'none'" #CreateDeviceProtocol>
                <div class="card border-0">
                    <div class="card-body"> 
                        <app-device-protocol
                            [mode]="'add'" 
                            [(isValid)]="isProtocolValid">
                        </app-device-protocol>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
